<template>
  <div class="box">
    <div class="canvas-container" ref="canvasDom"></div>
  </div>
</template>

<script setup>
import * as THREE from 'three';
import { onMounted, ref } from 'vue';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const logoMaterial = new THREE.MeshPhysicalMaterial({
  color: 0xffffff	,
  metalness: 1,
  roughness: 0.1
})

const canvasDom = ref(null)

const scene = new THREE.Scene()
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(window.innerWidth, window.innerHeight)
const camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(0, 1, 1)
const controls = new OrbitControls(camera, renderer.domElement)

const render = () => {
  renderer.render(scene, camera)
  controls.update()
  requestAnimationFrame(render)
}
onMounted(() => {
  canvasDom.value.appendChild(renderer.domElement)
  renderer.setClearColor('#000')
  render()

  //网格地面
  // const gridHelper = new THREE.GridHelper(10, 10)
  // gridHelper.transparent = true
  // gridHelper.material.opacity = 0.3
  // scene.add(gridHelper)
  //加载鞋模型
  const loader = new GLTFLoader()
  const dracoLoader = new DRACOLoader()
  dracoLoader.setDecoderPath('./draco/gltf/')
  dracoLoader.preload()
  loader.setDRACOLoader(dracoLoader)
  loader.load('./model/nike.glb', (gltf) => {
    // console.log(gltf.scene);
    const nike = gltf.scene
    nike.traverse((child) => {
      console.log(child);
      if (child.Mesh && child.name.includes("Shoe_Flap010")){
        child.material = logoMaterial
      }
      if (child.Mesh && child.name.includes("Shoe_Flap011")){
        child.material = logoMaterial
      }
    })
    scene.add(nike)
  })
  const light1 = new THREE.DirectionalLight(0xffffff, 1)
light1.position.set(0, 0, 10)
const light2 = new THREE.DirectionalLight(0xffffff, 1);
light2.position.set(0, 0, -10);
scene.add(light2);
const light3 = new THREE.DirectionalLight(0xffffff, 1);
light3.position.set(0, 10, 0);
scene.add(light3);
scene.add(light1)

})

</script>

<style lang="less" scoped>
.box{
  .canvas-container{
    width: 100vw;
    height: 50%vh;
  }
}
</style>